<template>
	<view class="title"><text>最多添加5位住院人</text></view>
	<view class="header-box" v-for="v in Data.user" :key="v">
		<view class="header">
			<view class="header-content" @click="checkPersonalInformation(v.id)">
				<view class="personal-information">
					<text>{{v.name}}</text>
					<view><text>{{v.status==0?'住院中':'已出院'}}</text></view>
				</view>
				<view class="information">
					<text>住院号</text>
					<text>{{v.inpatientNum}}</text>
				</view>
				<view class="information">
					<text>就诊卡号</text>
					<text>{{v.visitNum}}</text>
				</view>
				<view class="information">
					<text>入院时间</text>
					<text>{{v.inHospitalTime}}</text>
				</view>
				<view class="information">
					<text>出院时间</text>
					<text>{{v.leaveHospitalTime}}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="btn" @click="checkBinding">
		<view><text>绑定新住院号</text></view>
	</view>
</template>

<script setup>
	import {reportFormStore} from '@/store/reportFormStore'
	import {useLoginStore} from '@/store/loginStore.js'
	import {InpatientInformationQueryApi} from '@/api/ViewServices'
	import {onMounted, reactive} from 'vue'
	
	const store=useLoginStore()
	let id=store.id
	let Data=reactive({
		user:''
	})
	
let checkBinding = () => {
	uni.navigateTo({
		url: '/pages/personHospital/bindNum/bindNum'
	})
}
let checkPersonalInformation = (id) => {
	uni.navigateTo({
		url: `/pages/personHospital/personHospitalInfo/personHospitalInfo?id=${id}`
	})
}
onMounted(()=>{
	InpatientInformationQueryApi({userId:id}).then(({data})=>{
		Data.user=data.data
	})
})
</script>

<style scoped lang="less">
.title {
	width: 750rpx;
	height: 76rpx;
	background-color: #faf0e9;
	display: flex;
	align-items: center;

	text {
		margin-left: 34rpx;
		font-size: 24rpx;
		color: #ff9c4c;
	}
}

.header-box {
	width: 750rpx;
	height: 390rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
}

.header {
	width: 688rpx;
	height: 340rpx;
	border-radius: 10rpx;
	background: #f3f8fe;
	display: flex;
	justify-content: center;
	align-items: center;

	.header-content {
		width: 630rpx;
		height: 252rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.personal-information {
			width: 630rpx;
			height: 44rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #474848;

			view {
				width: 114rpx;
				height: 40rpx;
				background-color: #c4eee5;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #03ca82;
				}
			}
		}

		.information text:nth-child(1) {
			font-size: 24rpx;
			color: #bbbcbd;
		}
		.information text:nth-child(2) {
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}
}
.btn {
	width: 750rpx;
	height: 146rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	view {
		width: 688rpx;
		height: 82rpx;
		background-color: #006eff;
		color: white;
		font-size: 38rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
